<template>
    <div class="html-content" v-show="content" v-html="content"  @click="preview()"></div>
</template>

<script setup lang="ts">

const props = defineProps({
    text: {
        type: String,
        default: ""
    },
});
const data = reactive({
    content: '',
});

const {content} = toRefs(data);

/**
 * 添加图片宽高
 */
const addWidthHeightToImgTag = (htmlString: string, width: string, height: string): string => {
    const imgTagRegex = /<img([^>]*)>/g;
    return htmlString.replace(imgTagRegex, (match, attributes) => {
        const updatedAttributes = `${attributes} width="${width}" height="${height}"`;
        return `<img${updatedAttributes}>`;
    });
}

const preview = () => {

}

onMounted(() => {
    content.value = addWidthHeightToImgTag(props.text, "200", "200");
})

</script>

<style scoped>
.html-content {
    width: 100%;
    height: 100%;
    min-height: 0.5rem;
    overflow-x: auto;
    overflow-y: hidden;
    border-radius: 0.1rem;
    line-height: 0.36rem;
    font-size: 0.3rem;
    color: var(--text-color);
}
</style>